import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/common/credit_card.dart';
import 'package:macnov/common/loading.dart';
import 'package:macnov/common/virtual_card.dart';
import 'package:macnov/stores/wallet.dart';
import 'package:macnov/utils/colorUtil.dart';
import 'package:macnov/utils/constant.dart';
import 'package:macnov/utils/dateutil.dart';

class VirtualCardDetailsScene extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _VirtualCardDetailsState();
  }
}

class _VirtualCardDetailsState extends State<VirtualCardDetailsScene> {
  CreditCardViewModel vcard;
  void _freezeCard() {
    walletStore.expireCard(vcard.id, () => _deleteComplete(context));
  }

  void _avtiveCard() {
    walletStore.activeCard(vcard.id, () {
      walletStore.loadVCards();
    });
  }

  void _deleteComplete(BuildContext context) {
    Navigator.pop(context);
    walletStore.loadVCards();
  }

  void _delCard() {
    walletStore.delVCard(vcard.id, () => _deleteComplete(context));
  }

  void showComDialog(String title, String content, OnVoidSuccess cb) {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return AlertDialog(
            content: Text(content),
            title: Center(
                child: Text(
              title + '?',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold),
            )),
            actions: <Widget>[
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('NO')),
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                    cb();
                  },
                  child: Text('YES')),
            ],
          );
        });
  }

  void selectMenu(String value) {
    if ('del' == value) {
      showComDialog(
          'Delete Card',
          'Are you sure you want terminate this card? This is not reversible.',
          _delCard);
    } else if ('edit' == value) {
      if (isActive() == false) {
        _avtiveCard();
      } else {
        showComDialog(
            'Freeze Card',
            'Freeze this card? No transactions can occur while forzen',
            _freezeCard);
      }
    }
  }

  bool isActive() {
    return vcard.status == 'A' ? true : false;
  }

  @override
  Widget build(BuildContext context) {
    vcard = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          brightness: Brightness.light,
          iconTheme: IconThemeData(color: Colors.black),
          elevation: 0.0,
          // title: new Text('NEW CARD',style: TextStyle(color: Colors.black),),
          actions: <Widget>[
            PopupMenuButton<String>(
              onSelected: selectMenu,
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                PopupMenuItem<String>(
                  value: 'edit',
                  child: ListTile(
                    title: Text(
                      isActive() ? 'Freeze card' : 'Active card',
                    ),
                    leading: Icon(Icons.edit),
                  ),
                ),
                PopupMenuDivider(),
                PopupMenuItem<String>(
                  value: 'del',
                  child: ListTile(
                      title: Text('Delete card',
                          style:
                              TextStyle(color: ColorsUtil.hexColor(0xE00101))),
                      leading: Icon(Icons.delete)),
                )
              ],
            )
          ],
        ),
        body: Observer(
          builder: (_) => walletStore.loadAuthCardInfoReady == false
              ? Loading()
              : ListView(
                  children: <Widget>[
                    Container(
                      color: Colors.white,
                      child: Container(
                        margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                        child: AuthVirtualCard(data: vcard),
                      ),
                    ),
                    cardInfoWidget(context),
                    // transactionWidget()
                  ],
                ),
        ));
  }
}

Widget cardInfoWidget(context) {
  return Observer(
      builder: (_) => Container(
            margin: EdgeInsets.all(10),
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: <Widget>[
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'CARD INFORMATION',
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 12,
                          fontWeight: FontWeight.bold),
                    )
                  ],
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
                  decoration: BoxDecoration(color: Colors.white),
                  child: Column(
                    children: <Widget>[
                      infoItemWidget('CARD LIMIT',
                          r'$' + '${walletStore.authCardInfo.cardLimit}'),
                      infoItemWidget(
                          'EXP.DATE',
                          DateUtil.expFormat(
                              walletStore.authCardInfo.expiration)),
                      infoItemWidget('CVC', walletStore.authCardInfo.cvc),
                      infoItemWidget('ADDRESS',
                          '${walletStore.authCardInfo.address},${walletStore.authCardInfo.city},${walletStore.authCardInfo.state}'),
                    ],
                  ),
                )
              ],
            ),
          ));
}

Widget infoItemWidget(title, data) {
  return Container(
    padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
    child: Row(
      children: <Widget>[
        Container(
          width: 120,
          child: Text(
            title,
            style:
                TextStyle(color: ColorsUtil.hexColor(0x989898), fontSize: 14),
          ),
        ),
        Container(
          width: Platform.isAndroid ? 160 : 200,
          margin: EdgeInsets.only(left: 15),
          child: Text(
            data,
            maxLines: 2,
            style: TextStyle(
                color: ColorsUtil.hexColor(0x161920),
                fontSize: 20,
                fontWeight: FontWeight.bold),
          ),
        )
      ],
    ),
  );
}

Widget transactionWidget() {
  return Container(
    margin: EdgeInsets.only(top: 10),
    child: Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(10),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                'TRANSACTIONS',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 12,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.all(10),
          color: Colors.white,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                'assets/wallet/wallet_physucal_card_mastercard.png',
                width: 40,
              ),
              Container(
                margin: EdgeInsets.only(left: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'STARBUCKS STORE 10039',
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.bold),
                    ),
                    Text(
                      '7/6/2019',
                      style: TextStyle(color: Colors.grey, fontSize: 12),
                    )
                  ],
                ),
              ),
              Expanded(
                  child: Text(
                r'$21.07',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              )),
            ],
          ),
        )
      ],
    ),
  );
}
